/*
 * @Description:自定义confirm  二次确认组件
 * @Author:
 * @Date:
 * @LastEditors: dh
 * @LastEditTime: 2022-06-28 11:10:04
 */

import Vue from "vue";
import confirm from "./index.vue";

const confirmConstructor = Vue.extend(confirm);

let removeTimer;

/**
 * @description: 移除元素
 */
function removeEL(el) {
	window.clearTimeout(removeTimer);
	removeTimer = window.setTimeout(() => {
		document.body.removeChild(el);
	}, 200);
}

/**
 * @param {*} option 构建的入參
 */
const myConfirm = function (option) {
	return new Promise((resolve, reject) => {
		// 组件实例
		const confirmDom = new confirmConstructor({
			el: document.createElement("div"),
			propsData: {},
			data: option, // 会合并原本参数
		});

		console.log(confirmDom);
		document.body.appendChild(confirmDom.$el); // new一个对象，然后插入body里面

		// 确认
		confirmDom.resolve = function () {
			resolve(confirmDom.content);
			removeEL(confirmDom.$el);
		};

		// 取消
		confirmDom.reject = function () {
			reject();
			removeEL(confirmDom.$el);
		};
	});
};

export default myConfirm;

// 在需要的地方直接用以下方法调用即可：
//   this.$confirm({
//     title:'提示',
//     confirmText:'yes',
//     cancelText:'no'
// }).then(( data) => {
//     console.log('ok')
// })
// .catch((data) => {
//     console.log('no')
// })
